<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
  var name = "window";

  var person1 = {
    name: "person1",
    foo1: function() {
      console.log(this.name);
    },
    foo2: () => {
      console.log(this.name);
    },
    foo3: function() {
      console.log(this.name)
      return function() {
        console.log(this.name);
      }
    },
    foo4: function() {
      console.log(this.name)
      return () => {
        console.log(this.name);
      }
    }
  };

  var person2 = { name: "person2" };

  person1.foo1(); // person1
  person1.foo1.call(person2); // person2

  person1.foo2(); // window
  person1.foo2.call(person2); // window

  person1.foo3()(); // window
  person1.foo3.call(person2)(); // window
  person1.foo3().call(person2); // person2

  person1.foo4()(); // window 这里错了是 person1
  person1.foo4.call(person2)();// window 这里错了是 person2
  person1.foo4().call(person2); // window 这里错了是 person1

  //这个还挺经典的
  /**
   * 普通函数的理解还可以
   * 但是箭头函数的this理解要加强
   * 箭头函数的意思就是,压根不接受调用时候传过来的this
   * 比如person1.foo4()();
   * person1.foo4()这个时候 foo4的this是 person1这个毋庸置疑
   * 但是在person1.foo4()()的时候,调用者是window,于是就往里面传了一个window
   * 但是箭头函数不认这个window,这个window就跟没传是一样的,那么就只能去调用链去找,
   * 上一层的调用链就是person1.foo4(),这里的this是啥就是啥
   */

</script>

</body>
</html>